<template>
    <div style="background-color: white;margin: 30px;padding: 30px;">
    <el-form
      ref="ruleFormRef"
      style="max-width: 1300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
    <el-form-item label="检查申请" prop="name">
        <el-tag type="success"  >患者账单合计金额为：{{ruleForm.name}}</el-tag>
        <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    size="mini"
  >
    <el-table-column   :selectable="selectable" width="55" />
    <el-table-column label="#" width="50"></el-table-column>
    <el-table-column label="名称" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="内容" width="120" />
    <el-table-column property="address"  width="120" label="规格" />
    <el-table-column property="address"  width="120" label="数量" />
    <el-table-column property="address"  width="120" label="单价" />
    <el-table-column property="address"  width="120" label="金额" />
        <el-table-column property="address"  width="120" label="收费状态" >
    </el-table-column>
 
  <el-table-column label="操作" width="300">
    <template #header>
        <el-button type="success"  plain stype="margin:10px" >刷新</el-button>
    </template>
  </el-table-column> 
  </el-table>
</el-form-item>     
    </el-form>
 
</div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import type { TableInstance } from 'element-plus'
  import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
interface User {
  id: number
  date: string
  name: string
  address: string
}
const handleEdit = (index: number) => {
  console.log('edit', index)
}
const handleDelete = (index: number) => {
  console.log('delete', index)
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])
    const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const selectable = (row: User) => ![1, 2].includes(row.id)
const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
  interface RuleForm {
    name: string
    
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: null,
 
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ]
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>